<template>
    <div class="login-by-phone">
         <el-form ref="phoneFormRef" 
                  :model="phoneForm" 
                  :rules="phoneFormRules"
                  class="login-form"
                  label-width="0">
                <el-form-item prop="mobile">
                    <el-input v-model="phoneForm.mobile" placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item prop="sms_code">
                    <el-input v-model="phoneForm.sms_code" placeholder="请输入验证码">
                        <template #suffix>
                            <div class="btn-text" @click="getCaptcha" :class="{disabled: Boolean(!phoneForm.mobile || intervalTime != 0)}">{{btnText}}</div>
                        </template>
                    </el-input>
                </el-form-item>
        </el-form>
        <el-button :disabled="!(Boolean(phoneForm.mobile) && Boolean(phoneForm.sms_code))" 
                   @click="submitForm(phoneFormRef)"
                   class="btn" 
                   type="primary">登录</el-button>
        <div class="row">
            <div class="tip">
                <span class="text">还没有账号？</span>
                <span class="link" @click="register">去注册</span>
            </div>
        </div>      
    </div>
</template>
<script lang="ts" setup>
import {ref, reactive} from 'vue';
import {ElMessage} from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'

import {sendLoginCaptcha, loginByMobile} from 'services/system'

const emits = defineEmits(['submit', 'register'])

const phoneFormRef = ref<FormInstance>()
const phoneForm = ref({
    mobile:'',
    sms_code:''
})

const btnText = ref('获取验证码')
const intervalTime = ref(0)

const checkPhone = (rule:any,value:any,callback:any) => {
    let reg = /^1[0-9]{10}$/;
    
    if (value === '') {
        callback(new Error('请输入手机号'))
    } else if (!reg.test(value)) {
        callback(new Error('请输入正确的手机号'))
    } else {
        callback()
    }
}

const phoneFormRules = reactive<FormRules>({
    mobile:[{validator:checkPhone, trigger:'blur'}],
    sms_code:[{required:true,message:'请输入验证码', trigger:'blur'}]
})

const getCaptcha = () => {
    if (!phoneForm.value.mobile) {
        return;
    }

    if (intervalTime.value > 0) {
        return;
    }

    let reg = /^1[0-9]{10}$/;
    if (!reg.test(phoneForm.value.mobile)) {
        ElMessage.error('手机号码不正确')
        return;
    }
    
    sendLoginCaptcha({
        mobile:phoneForm.value.mobile
    }).then(res => {
        countDown()
    })
}
let timer:any;

const countDown = () => {
    intervalTime.value = 60;
    timer = setInterval(() => {
        if (intervalTime.value == 0) {
            clearInterval(timer)
            btnText.value = '获取验证码'
        } else {
            btnText.value = `${intervalTime.value}s可重新获取`
        }
        intervalTime.value--
    }, 1000)
}

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            loginByMobile(phoneForm.value).then((res:any) => {
                emits('submit', res.token)
            })
        } else {
            console.log('error submit', fields)
        }
    }) 
}

const register = () => {
    emits('register')
}
</script>
<style lang="scss">
.login-by-phone{
    .row{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 48px;
        width: 100%;
        margin-top: 8px;

        .tip{
            font-size: 14px;
            color: #000;

            .link{
                color: #2770EE;
                cursor: pointer;
            }
        }
    }

    .btn-text{
        color: #2770EE;
        cursor: pointer;
        font-weight: 500;

        &.disabled{
            color: #C0C4CC;
            cursor: not-allowed;
        }
    }
}
</style>